<template>
    <div class="carousel-wrapper">
        <!-- 轮播图容器 -->
        <el-carousel height="auto" autoplay :interval="5000" arrow="always">
            <el-carousel-item style="height: 500px;" v-for="(image, index) in images" :key="index">
                <img class="carousel-image" :src="image" alt="Banner" />
            </el-carousel-item>
        </el-carousel>
    </div>
</template>

<script setup>
import banner1 from '@/assets/banner/banner-1.png';
import banner2 from '@/assets/banner/banner-2.png';
import banner3 from '@/assets/banner/banner-3.png';
import banner4 from '@/assets/banner/banner-4.png';
import banner5 from '@/assets/banner/banner-5.png';

const images = [banner1, banner2, banner3, banner4, banner5];
</script>

<style scoped>
.carousel-wrapper {
    width: 1200px;
    /* 设置轮播图的宽度为1200px */
    margin: 0 auto;
    /* 居中显示 */
    max-width: 100%;
    /* 使宽度最大为1200px */
}

.el-carousel__item img {
    width: 100%;
    height: auto;
    object-fit: cover;
    /* 确保图片在不失真情况下自适应 */
}

.el-carousel__item:nth-child(2n) {
    background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n + 1) {
    background-color: #d3dce6;
}
</style>
